<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-focus>
				
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let lcPlugin = {
				install:function(Vue){
					console.log("安装LC插件")
					// 1. 添加全局方法或属性
					Vue.bgColor = 'skyblue'
					Vue.changeBg = function () {
						document.body.style.background = Vue.bgColor
					    // 逻辑...
					}
					
					
					  // 2. 添加全局指令
					  Vue.directive('focus', {
					    bind (el, binding, vnode, oldVnode) {
					      // 逻辑...
						  el.innerHTML = '<h1>focus</h1>'
					    }
					    //...
					  })
					  Vue.directive('lc', {
					    bind (el, binding, vnode, oldVnode) {
					      // 逻辑...
					    }
					    //...
					  })
					
					  // 3. 注入组件选项
					  Vue.mixin({
					    created: function () {
					      // 逻辑...
						  console.log("这是混入得生命周期")
					    }
					    //...
					  })
					
					  // 4. 添加实例方法
					  Vue.prototype.$changeColor = function (methodOptions) {
					    // 逻辑...
						Vue.changeBg()
					  }
				
				
				
				
				
				
				
				
				}
			}
			
			//`lcPlugin.install(Vue)`
			Vue.use(lcPlugin)
			let app = new Vue({
				el:"#app"
			})
		</script>
	</body>
</html>
